<template>
  <div class="all">
    <div class="one">
      <div class="topOne">
        <div
          class="same dif1"
          :class="biao === '电'? 'selected' : ''"
          @click="changeEquipList('电')"
        >电</div>
        <div
          class="same"
          :class="biao === '水'? 'selected' : ''"
          @click="changeEquipList('水')"
        >水</div>
      </div>
      <div class="titleOne">{{ biao === '电'? '设备电表选择' : '设备水表选择' }}</div>
      <div class="bodyOne">
        <div class="one">
          <div
            v-for="item,index in equipList"
            :key="index"
            class="item"
            :class="selectIndex === index? 'selectedItem':''"
            @click="selectEquip(item.dataItemId,index)"
          >{{ item.equipmentName }}</div>
        </div>
      </div>
    </div>
    <div class="two"></div>
    <div class="three">
      <div style="display: flex; height: 8%;align-items: center;">
        <div class="threeOne">能耗量</div>
        <div class="three1">
          <div
            class="threeTime"
            :class="timeType1 === '年'? 'threeTimeDiff':''"
            @click="getTimeType1('年')"
          >年</div>
          <div
            class="threeTime"
            :class="timeType1 === '月'? 'threeTimeDiff':''"
            @click="getTimeType1('月')"
          >月</div>
          <div
            class="threeTime"
            :class="timeType1 === '日'? 'threeTimeDiff':''"
            @click="getTimeType1('日')"
          >日</div>
          <div>
            <el-date-picker
              v-model="dateArr1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="false"
              @change="getBiaoData1"
            />
          </div>
        </div>
      </div>
      <div class="threeTwo">
        <div class="threeTwo1">
          <Lchart nowwidth="100%" nowheight="280px" :cdata="series1" />
        </div>
        <div class="threeTwo2">
          <img class="img" src="@/assets/energy-manage/energy.png" alt />
          <div class="text">
            <div>能耗量</div>
            <div class="textson">
              <span class="text1">{{ blockData1 }}</span>
              <span class="text2">{{ unitName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div
        style="display: flex; align-items: center; height: 8%; margin-top:16px"
      >
        <div class="threeOne">能耗累积量</div>
        <div class="three1">
          <div
            class="threeTime"
            :class="timeType2 === '年'? 'threeTimeDiff':''"
            @click="getTimeType2('年')"
          >年</div>
          <div
            class="threeTime"
            :class="timeType2 === '月'? 'threeTimeDiff':''"
            @click="getTimeType2('月')"
          >月</div>
          <div
            class="threeTime"
            :class="timeType2 === '日'? 'threeTimeDiff':''"
            @click="getTimeType2('日')"
          >日</div>
          <div>
            <el-date-picker
              v-model="dateArr2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="false"
              @change="getBiaoData2"
            />
          </div>
        </div>
      </div>
      <div class="threeTwo">
        <div class="threeTwo1">
          <Lchart nowwidth="100%" nowheight="280px" :cdata="series2" />
        </div>
        <div class="threeTwo2">
          <img class="img" src="@/assets/energy-manage/energy.png" alt />
          <div class="text">
            <div>累积量</div>
            <div class="textson">
              <span class="text1">{{ blockData2 }}</span>
              <span class="text2">{{ unitName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mymixin } from "@/utils/mixins";
import Api from "@/api/livestock-manage/energy-management/statisticalDataApi";
import deviceApi from "@/api/livestock-manage/energy-management/deviceApi";
import Lchart from "@/components_yy/Echarts/components/linechart/chartThree.vue";
import fenceManageApi from "@/api/basic-info-manage/fence-management";
export default {
  name: "StatisticalData",
  components: { Lchart },
  mixins: [mymixin],
  data() {
    return {
      blockData1: "",
      blockData2: "",
      timeType1: "月",
      timeType2: "月",
      dateArr1: [],
      dateArr2: [],
      biao: "",
      unitName: "kw",
      selectIndex: "",
      shuiList: [],
      dianList: [],
      equipList: [],
      paramsUp: {
        accuracy: "",
        dataItemId: "",
        startTime: "",
        endTime: ""
      },
      paramsDown: {
        accuracy: "",
        dataItemId: "",
        startTime: "",
        endTime: ""
      },
      series1: {
        seriesData: [
          {
            data: [],
            type: "line",
            areaStyle: {}
          }
        ],
        unitName: "",
        xAxisdata: []
      },
      series2: {
        seriesData: [
          {
            data: [],
            type: "line",
            areaStyle: {}
          }
        ],
        unitName: "",
        xAxisdata: []
      }
    };
  },
  created() {
    this.getEquip();
  },
  mounted() {
  },
  methods: {

    getXdata(date, timeJ) {
      date = date.substring(timeJ === "日" ? 5 : timeJ === "月" ? 5 : 5);
      return date;
    },
    getTimeType1(e) {
      this.timeType1 = e;
      this.dateArr1 = [];
      let startTime = "";
      let endTime = this.dateToFormat(new Date());
      let currentYear = new Date().getFullYear();
      if (e === "年") {
        startTime = currentYear + "-01-01 00:00:00";
        this.paramsUp.accuracy = 1;
      }
      if (e === "月") {
        const m = (new Date().getMonth() + 1 + "").padStart(2, "0");
        startTime = `${currentYear}-${m}-01 00:00:00`;
        this.paramsUp.accuracy = 2;
      }
      if (e === "日") {
        const m = (new Date().getMonth() + 1 + "").padStart(2, "0");
        const d = (new Date().getDate() + "").padStart(2, "0");
        startTime = `${currentYear}-${m}-${d} 00:00:00`;
        this.paramsUp.accuracy = 3;
      }
      this.dateArr1.push(startTime);
      this.dateArr1.push(endTime);
      this.getBiaoData1(this.dateArr1);
    },
    getTimeType2(e) {
      this.timeType2 = e;
      this.dateArr2 = [];
      let startTime = "";
      let endTime = this.dateToFormat(new Date());
      let currentYear = new Date().getFullYear();
      if (e === "年") {
        startTime = currentYear + "-01-01 00:00:00";
        this.paramsDown.accuracy = 1;
      }
      if (e === "月") {
        const m = (new Date().getMonth() + 1 + "").padStart(2, "0");
        startTime = `${currentYear}-${m}-01 00:00:00`;
        this.paramsDown.accuracy = 2;
      }
      if (e === "日") {
        const m = (new Date().getMonth() + 1 + "").padStart(2, "0");
        const d = (new Date().getDate() + "").padStart(2, "0");
        startTime = `${currentYear}-${m}-${d} 00:00:00`;
        this.paramsDown.accuracy = 3;
      }
      this.dateArr2.push(startTime);
      this.dateArr2.push(endTime);
      this.getBiaoData2(this.dateArr2);
    },
    getBiaoData1(arr) {
      if (arr === null) {
        this.getTimeType1(this.timeType1);
        return;
      }
      this.series1 = {};
      this.paramsUp.startTime = this.dateToFormat(arr[0]);
      this.paramsUp.endTime = this.dateToFormat(arr[1]);
      Api.queryByEnergyCount(this.paramsUp).then(res => {
        let data = res.data || [{ countvalue: 0 }];
        if (res.code === 1) {
          this.series1 = {
            seriesData: [
              {
                data: data.map(item => item.countvalue || 0),
                type: "bar",
                name: this.biao + "表",
                areaStyle: {}
              }
            ],
            yAxisName: this.biao === "电" ? "kw" : "m³",
            xAxisName:
              this.timeType1 === "年"
                ? "月"
                : this.timeType1 === "月"
                  ? "号"
                  : "点",
            unitName: "",
            xAxisdata: data.map(item => {
              return this.getXdata(item.collectDate, this.timeType1);
            }),
            xData: [this.biao1 + "表"]
          };
        }
      });
      Api.queryByCount(this.paramsUp).then(res => {
        this.blockData1 = res.data || 0;
      });
    },
    getBiaoData2(arr) {
      if (arr === null) {
        this.getTimeType2(this.timeType2);
        return;
      }
      this.series2 = {};
      this.paramsDown.startTime = this.dateToFormat(arr[0]);
      this.paramsDown.endTime = this.dateToFormat(arr[1]);
      Api.queryByEnergy(this.paramsDown).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          this.series2 = {
            seriesData: [
              {
                data: data.map(item => item.value || 0),
                type: "line",
                name: this.biao + "表"
              }
            ],
            yAxisName: this.biao === "电" ? "kw" : "m³",
            xAxisName:
              this.timeType2 === "年"
                ? "月"
                : this.timeType2 === "月"
                  ? "号"
                  : "点",
            unitName: "",
            xAxisdata: data.map(item => {
              return this.getXdata(item.collectDate, this.timeType2);
            }),
            xData: [this.biao1 + "表"]
          };
          let length = res.data.length;
          this.blockData2 = res.data[length - 1]?.value || 0;
        }
      });
    },
    // 选择设备
    selectEquip(dataItemId, index) {
      this.selectIndex = index;
      this.paramsUp.dataItemId = dataItemId;
      this.paramsDown.dataItemId = dataItemId;
      this.getTimeType1("月");
      this.getTimeType2("月");
    },
    // 选择设备类型
    changeEquipList(e) {
      this.biao = e;
      if (e === "电") {
        this.unitName = "kw";
        this.equipList = this.dianList;
        this.selectEquip(this.dianList[0].dataItemId, 0);
      } else {
        this.unitName = "m³";
        this.equipList = this.shuiList;
        this.selectEquip(this.shuiList[0].dataItemId, 0);
      }
    },
    // 获取设备
    getEquip() {
      deviceApi.conditionQuery({ type: "电表" }).then(res => {
        this.dianList = res.data || [];
        this.changeEquipList("电");
      });
      deviceApi.conditionQuery({ type: "水表" }).then(res => {
        this.shuiList = res.data || [];
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  border-color: #3591eb;
  color: #3591eb;
  border-radius: 4px;
}
::v-deep .el-range-separator {
  color: #3591eb;
}
::v-deep .el-range__icon {
  color: #3591eb;
}
::v-deep .el-date-editor .el-range-input {
  color: #3591eb !important;
}
.all {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  color: #000000;
  box-shadow: 0 0 3px 1px rgba(45, 45, 45, 0.2);
  padding-top: 20px;
  display: flex;
}
.one {
  height: 100%;
  width: 18%;
  .titleOne {
    height: 6%;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .bodyOne {
    height: 81%;
    width: 100%;
    padding: 0 30px;
    .one {
      width: 100%;
      overflow: auto;
      .item {
        width: 100%;
        border: #d1d0d0 1px solid;
        border-bottom: unset;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        &:hover {
          background-color: #3591eb;
          color: #ffffff;
        }
      }
      :last-child {
        border-bottom: #d1d0d0 1px solid;
      }
      .selectedItem {
        background-color: #3591eb;
        color: #ffffff;
      }
    }
  }
}
.topOne {
  height: 11%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  .same {
    width: 120px;
    height: 36px;
    line-height: 33px;
    border: 1px solid #3591eb;
    color: #3591eb;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
  }
  .dif1 {
    margin-right: 10px;
  }
  .selected {
    background-color: #3591eb;
    color: #ffffff;
  }
}
.two {
  border-right: #d1d0d0 1px solid;
  margin-top: 3%;
  margin-bottom: 10px;
}
.three {
  width: 82%;
  margin-left: 30px;
  height: 98%;
  margin-right: 14px;
  .three1 {
    display: flex;
    font-size: 16px;
    height: 12%;
    align-items: center;
    .threeTime {
      width: 80px;
      border: #3591eb 1px solid;
      text-align: center;
      height: 36px;
      line-height: 34px;
      border-radius: 4px;
      margin-right: 5px;
      color: #3591eb;
      cursor: pointer;
    }
    .threeTimeDiff {
      background-color: #3591eb;
      color: #ffffff;
    }
  }
  .threeOne {
    text-align: center;
    font-size: 16px;
    margin-right: 50px;
    font-weight: 600;
    width: 260px;
    background-color: #dfe5e7;
    border: #376ea4 2px solid;
    color: #376ea4;
    height: 36px;
    line-height: 32px;
    border-radius: 2px;
  }
  .threeTwo {
    display: flex;
    height: 41%;
    width: 100%;
    // background-color: #e7e9ec;
  }
  .threeTwo1 {
    height: 100%;
    width: 75%;
    border-radius: 3px;
    .three2 {
      height: 82%;
      width: 100%;
    }
  }
  .threeTwo2 {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .img {
      width: 80%;
    }
    .text {
      position: absolute;
      top: 25%;
      left: 20%;
      color: #ffffff;
      font-size: 19px;
      .textson {
        margin-top: 12%;
        .text1 {
          font-size: 50px;
        }
        .text2 {
          font-size: 34px;
        }
      }
    }
  }
}
</style>
